<template>
    <div class="full-h flex-center xp-terminal-wrapper">
        <div class="command-input-content scrollbar" 
        ref="terminalRef"
        @click="handleFocus">
            <div>
                <template v-for="(output, index) in outPutList" :key="index">
                    <template v-if="output.type === 'command'">
                        <div class="terminal-row flex-start">
                            <span>[local]$</span>
                            <span style="margin-left:10px;width: calc(100% - 70px);" class="oneline">{{output.text}}</span>
                        </div>
                        <div
                            v-for="(result, i) in output?.resultList"
                            :key="i"
                            class="terminal-row"
                        >
                            <contentOutput :output="result"></contentOutput>
                        </div>
                    </template>
                    <template v-else>
                        <div class="terminal-row">
                            <contentOutput :output="output"></contentOutput>
                        </div>
                    </template>
                </template>
            </div>
            <div class="flex-start terminal-row">
                <span>[local]$</span>
                <el-input
                ref="commandInput"
                v-model="content.text"
                autofocus
                :disabled="isRunning"
                @keydown.enter="doSubmitCommand"
                />
                <el-icon v-if="isRunning" :class="isRunning?'is-loading':''" style="margin-left:10px">
                    <Loading />
                </el-icon>
            </div>
        </div>
    </div>
</template>
  
<script lang='ts'>
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import contentOutput from '@/components/window/slot/xpCommand/contentOutput.vue';
import TerminalType = xpTerminal.TerminalType;
import OutputType = xpTerminal.OutputType;
import CommandInputType = xpTerminal.CommandInputType;
import OutputStatusType = xpTerminal.OutputStatusType;
import TextOutputType = xpTerminal.TextOutputType;
import CommandOutputType = xpTerminal.CommandOutputType;
import { doCommandExecute } from './commandExecutor';
export default {
    name:'xpCommand',
    props: {

    },
    components: {
        contentOutput
    },
    emits:[],
    setup (props, context) 
    {
        const { proxy }:any = getCurrentInstance();
        const initCommand: CommandInputType = {
            text: '',
            placeholder: ''
        };
        let currentNewCommand: CommandOutputType;
        let data = reactive({
            isRunning:false,
            content:{
                ...initCommand
            } as CommandInputType,
            outPutList:[] as OutputType[]
        });
        let methods = {
            handleFocus ()
            {
                // 获取焦点
                proxy.$refs['commandInput'].focus();
            },
            handleClear ()
            {
                // 清空输出
                data.outPutList = [];
            },
            writeTextResult (text: string, status?: OutputStatusType)
            {
                // 写入命令文本结果
                const newOutput: TextOutputType = {
                    text,
                    type: 'text',
                    status
                };
                currentNewCommand.resultList.push(newOutput);
            },
            writeTextErrorResult (text: string) 
            {
                methods.writeTextResult(text, 'error');
            },
            writeTextSuccessResult (text: string)
            {
                methods.writeTextResult(text, 'success');
            },
            writeResult (output: OutputType) 
            {
                currentNewCommand.resultList.push(output);
            },
            writeTextOutput (text: string, status?: OutputStatusType)
            {
                const newOutput: TextOutputType = {
                    text,
                    type: 'text',
                    status
                };
                data.outPutList.push(newOutput);
            },
            writeOutput (newOutput: OutputType)
            {
                data.outPutList.push(newOutput);
            },
            isInputFocused () 
            {
                return proxy.$refs['commandInput'].input === document.activeElement;
            },
            async doSubmitCommand ()
            {
                // 执行命令
                data.isRunning = true;
                let inputText = data.content.text;
                const newCommand: CommandOutputType = {
                    text: inputText,
                    type: 'command',
                    resultList: []
                };
                currentNewCommand = newCommand;
                await methods.onSubmitCommand(inputText);
                data.outPutList.push(newCommand);
                data.content = { ...initCommand };
                setTimeout(() => 
                {
                    proxy.$refs['terminalRef'].scrollTop = proxy.$refs['terminalRef'].scrollHeight;
                    methods.handleFocus();
                }, 50);
                data.isRunning = false;
            },
            async onSubmitCommand (inputText)
            {
                if (!inputText) return;
                await doCommandExecute(inputText, terminal);
            }

        };
        const terminal: TerminalType = {
            writeTextResult:methods.writeTextResult,
            writeTextErrorResult:methods.writeTextErrorResult,
            writeTextSuccessResult:methods.writeTextSuccessResult,
            writeResult:methods.writeResult,
            writeTextOutput:methods.writeTextOutput,
            writeOutput:methods.writeOutput,
            clear:methods.handleClear,
            focusInput:methods.handleFocus,
            isInputFocused:methods.isInputFocused,
            doSubmitCommand:methods.doSubmitCommand
        };

        onMounted(() => 
        {
            terminal.writeTextOutput(
                `小鹏云聊 终端 [版本 0.0.1]`
            );
            terminal.writeTextOutput(
                `(c) 小鹏云聊 · 保留所有权利`
            );
            terminal.writeTextOutput('<br/>');
            methods.handleFocus();
        });
        return { 
            ...toRefs(data),
            ...methods
        };
    }
};
</script>
  
<style scoped lang="scss">
.xp-terminal-wrapper {
    position: relative;
    font-family: monospace;
    inset: 0px;
    background-color: #000;
}
.command-input-content {
    position: absolute;
    inset: 0px;
    width: 100%;
    padding: 10px 20px;
    height: 100%;
    overflow-y: auto;
}

.terminal-row {
    color: #fff;
    font-size: 16px;
    font-family: monospace;
    margin: 5px 0;
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    font-size: 16px;
    background-color: transparent;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
    box-shadow: none;
    background-color: transparent;
}

:deep(.el-input__inner) {
    font-family: monospace;
}
</style>
  